<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="购物广场"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
      />
    </header>
    <div class="content">
      <van-row>
        <van-col span="5">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item v-for="(item, index) of list" :key="index" :title="item" @click="findThis(item)"/>
          </van-sidebar>
        </van-col>
        <van-col span="19">
          <van-grid>
            <van-grid-item v-for="(item, index) of detailList" :key="index" :text="item.brand" @click="goSearch(item.brand)"/>
          </van-grid>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {
  NavBar,
  Sidebar,
  SidebarItem,
  DropdownMenu,
  DropdownItem,
  Grid,
  GridItem,
  Col,
  Row
} from 'vant'
import { categorybrandlist, categorylist } from '@/api/pro'

Vue.use(Sidebar)
Vue.use(SidebarItem)
Vue.use(NavBar)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Col)
Vue.use(Row)

export default {
  data () {
    return {
      activeKey: 0,
      list: [],
      detailList: []
    }
  },
  methods: {
    findThis (item) {
      categorybrandlist({ category: item }).then(res => {
        // console.log(res.data.data)
        this.detailList = res.data.data
      })
    },
    goSearch (item) {
      console.log(item)
      localStorage.setItem('Kind', item)
      this.$router.push('/search')
    }
  },
  mounted () {
    categorylist().then(res => {
      // console.log(res.data.data)
      this.list = res.data.data
    })
    categorybrandlist({ category: '手机' }).then(res => {
      // console.log(res.data.data)
      this.detailList = res.data.data
    })
  }
}
</script>

<style lang="stylus" scoped>
.content .van-row .van-col .van-sidebar
  width 85px
</style>
